<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <h2 @click="count++">count == {{count}}</h2>
        <button @click="changeCount(10)">count + 10 </button>
        <h2 @click="greet">msg -- {{msg}}</h2>
        <button @click="getEcent($event)">获取事件对象</button>
        <div @click="parentclick">
            <h2 @click.prevent.once.self="oneClick">event.preventDefault() 阻止浏览器的默认事件</h2>
            <h2 @click.stop="twoClick">event.stopPropagation() 阻止事件冒泡 </h2>
        </div>
        <div>
            <p><input type="text" placeholder="keyup" @keyup.enter.space="getKeyCode"></p>
            <p><input type="text" placeholder="keydown" @keydown.up.down.left.right="getKeyCode"></p>
            <p><input type="text" placeholder="keypress" @keypress.13.32="getKeyCode"></p>
        </div>
        <div>
            <h3>过滤器 - 文本格式</h3>
            <p>msg == {{msg | upper}}</p>
            <p :data-msg="msg | upper">msg == {{msg | lower}}</p>
            <p>num :{{num | toFixed(2)}}</p>
            <p>number:{{number | numFormat(4)}}</p>
            <p>分数：{{score | scoreFormat}}</p>
            <p>时间：{{ time |deteFormat}}</p>
            <p>财富：{{ money | huobi("￥",2)}}</p>
        </div>
    </div>
</body>
<script>

    // 全局过滤器
    Vue.filter("upper", value => {
        if (!value) return ""
        return value.toUpperCase()
    })

    Vue.filter("toFixed", (value, n) => {
        if (!value) return ''
        n = n || 2
        return value.toFixed(n);
    })

    Vue.filter("numFormat", (value, n) => {
        if (!value) return ''
        n = n || 10
        return value.toString(n) // 进制转换
    })

    Vue.filter("scoreFormat", (value) => {
        if (!value) return
        switch (parseInt(value / 10)) {

        }
    })
    Vue.filter("scoreFormat", (value) => {
        if (!value) return ""
        switch (parseInt(value / 10)) {
            case 9:
                return "A"
                break;
            case 8:
                return "B"
                break;
            case 7:
                return "C"
                break;
            case 6:
                return "D"
                break;
            default:
                return "E"
                break
        }
    })

    // 日期格式化
    Vue.filter("deteFormat", (value) => {
        if (!value) return ""
        var date = new Date(value);
        var year = date.getFullYear()
        var month = date.getMinutes() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var min = date.getMinutes()
        var sec = date.getSeconds()
        return `${year}-${month}-${month}-${hour}:${min}:${sec}`
    })
    // 货币格式化
    Vue.filter("huobi", (value, type, num) => {
        if (!value) return ""
        type = type || "$"
        num = num || 2
        return type + " " + value.toLocaleString("en", {
            minimumFractionDigits: num,      // 最少保留几位小数
            maximumFractionDigits: num       // 最多保留几位小数 
        })
    })
    const vm = new Vue({

        // 局部过滤器
        filters: {
            lower: function (value) {
                if (!value) return ""
                return value.toLowerCase()
            }
        },

        data: {
            title: "v-on   事件绑定    ",
            count: 1000,
            msg: "WH2110-DAYdatup",
            num: 100.1234,
            tel: "18012347861",
            number: 255,

            score: 99,
            time: new Date(),
            money: 782134947433494
        },
        methods: {
            changeCount(n) {
                this.count += n;
            },
            greet(e) {
                alert("Are you OK?")
            },
            getEcent(e) {
                console.log(e);
            },
            oneClick() {
                console.log('oneClick - oneClick - 晚上好好看电影 ')
            },
            parentclick() {
                console.log("parentclick - parentclick 父元素")
            },
            twoClick() {
                console.log('twoClick - twoClick - 加油学习Vue ')
            },
            getKeyCode(e) {
                console.log(e.keyCode)
            },
        }
    }).$mount("#app")
</script>
<!-- 

    用特殊变量 $event
    函数调用时候的参数 是实参
    函数定义时候的参数 是形参

    $event  vue 提供的事件对象 参数

    事件修饰符
    event.preventDefault（）  阻止浏览器的默认事件
    event.stopPropagation（）   阻止事件冒泡

    v-on 提供了时间修饰符
    .stop       阻止单击事件继续传播
    .prevent    阻止浏览器的默认事件
    .capture    
    .self
    .once       这个事件只能触发一次
    .passive

    按键修饰符     键盘事件（键盘码）
    enter   13
    right   37
    left
    space   32
    up
    down

    v-on:click  @click
    input
    change
    click
    dbclick
    keyup
    leudown
    keypress
    mousemove
    mousedown
    mousup
    mouseenter
    mouserleave

    touchstart      手机端事件
    touchmove
    touchend

    原生绑定事件 （DOM0级事件  DOM2级事件）
    onclick="do()" DOM0
    document.getElementyByid("box").onclick = fn
    addEventListener("click",fn,false/true) 默认 false false 冒泡 true  捕获  DOM2
    removeEventListener("click")

    jquery 绑定事件
    on / off $(".box").on("click")
    bind / unbind $(".box").bind("click")

    事件委托  ===>基于事件冒泡的原理  把子元素的触发 父元素代替子元素执行（给未来元素绑定事件 把事件绑定到父元素上）
    $(parent).on("click",child,fn)
    $(parent).delegete(child,"click",fn)    // 委托


    过滤器 filter
    Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化（日期格式 货币格式）
    过滤器可以用在两个地方：双花括号插值和V-bind表达式
    “管道” 符号指示 |

    Vue.filter 全局过滤器
    filters     局部过滤器


 -->


</html>